<template>
    <el-form-item label="" style="margin-bottom:12px">
        <div class="tk_coll_box" :class="{'open':dataForm.adgroup.audience[dataForm.audience_index].actions[2].is_show}">
            <div class="tk_coll_head flexbox flexcenter" @click="changeIscoll">
                <i class="el-icon-circle-plus-outline"></i>
                <div class="tk_coll_head_conter flex">
                    <div class="tch_title">添加行为：话题互动</div>
                    <div class="tch_text" v-if="dataForm.adgroup.audience[dataForm.audience_index].actions[2].action_category_ids.length>0">已选择{{dataForm.adgroup.audience[dataForm.audience_index].actions[2].action_category_ids.length}}种行为类别</div>
                    <div class="tch_text" v-else>根据用户与TikTok上的话题的互动情况定向用户。</div>
                </div>
                <i class="el-icon-delete" @click.stop="deleteAll" v-if="isDelete"></i>
            </div>
            <div class="tk_coll_content" v-show="dataForm.adgroup.audience[dataForm.audience_index].actions[2].is_show">
                <el-form-item label="" :prop="`adgroup.audience.${dataForm.audience_index}.actions.${2}.action_category_ids`" :rules="{required: isShow?true:false, message: '请选择', trigger: ['blur', 'change']}" style="margin-bottom:18px">
                    <div class="tk_tag_box" v-if="dataForm.adgroup.audience[dataForm.audience_index].actions[2].action_category_ids.length>0">
                        <el-tag type="info" v-for="(tag,index) in dataForm.adgroup.audience[dataForm.audience_index].actions[2].action_category_ids" :key="tag.keyword_id" closable size="mini" @close="deleteTag(tag,index)">
                            {{tag.keyword}}
                        </el-tag>
                    </div>
                    <el-popover placement="bottom-start" width="222" trigger="click">
                        <el-input size="small" slot="reference" placeholder="请输入要搜索的分类" clearable suffix-icon="el-icon-search" v-model="filterText" @input="getTall">
                        </el-input>
                        <div class="tall_box" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                            <template v-if="treeData.length>0">
                                <div class="tall_item" v-for="item in treeData" :key="item.keyword_id" @click="addTag(item)">{{item.keyword}}</div>
                            </template>
                            <div class="font_14 color_03 nodata" v-else>请输入搜索</div>
                        </div>
                    </el-popover>
                </el-form-item>
            </div>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props: ["dataForm"],
    components: {},
    name: "",
    data() {
        return {
            is_show: false,
            treeData: [],
            filterText: "",
            loading: false,
        };
    },
    created() {
        // this.getTall();
    },
    computed: {
        isDelete() {
            let is_show = false;
            if (
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[2].action_category_ids.length > 0
            ) {
                is_show = true;
            }
            return is_show;
        },

        isShow() {
            let is_show = true;
            if (
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[2].action_category_ids.length > 0
            ) {
                is_show = false;
            } else if (
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[2].action_category_ids.length <= 0
            ) {
                is_show = false;
            }
            return is_show;
        },
    },
    methods: {
        //获取兴趣
        async getTall() {
            if(!this.filterText){
                return
            }
            this.loading = true;
            this.treeData = [];
            const { data: res } = await this.$http.post(
                this.$tiktokUrl + "launch/TiktokInfo/hashtagList",
                {
                    keywords: this.filterText,
                    advertiser_id: this.dataForm.base[0].advertiser_id,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.treeData = res.data;
            }
        },

        addTag(item) {
            let list =
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[2].action_category_ids;
            let is_true = false
            for(let i in list){
                if(list[i].keyword_id == item.keyword_id){
                    is_true = true
                    break
                }
            }
            if(is_true){
                this.$message.error("已添加了该话题");
                return;
            }else{
                list.push(item)
            }
            this.sessionSave();
        },

        deleteTag(item, index) {
            this.dataForm.adgroup.audience[
                this.dataForm.audience_index
            ].actions[2].action_category_ids.splice(index, 1);
            this.sessionSave();
        },

        // 清空
        deleteAll() {
            this.dataForm.adgroup.audience[
                this.dataForm.audience_index
            ].actions[2].action_category_ids = [];
            this.sessionSave();
        },

        changeIscoll() {
            if (this.isShow) {
                this.dataForm.adgroup.audience[
                    this.dataForm.audience_index
                ].actions[2].is_show = true;
                this.$message.error("请先完善当前创作者互动行为！");
            } else {
                this.dataForm.adgroup.audience[
                    this.dataForm.audience_index
                ].actions[2].is_show =
                    !this.dataForm.adgroup.audience[
                        this.dataForm.audience_index
                    ].actions[2].is_show;
            }
            this.sessionSave();
        },

        // resetData(list, level) {
        //     let arr = [];
        //     list.forEach((item) => {
        //         if (item.children && item.level == level) {
        //         }
        //     });
        // },

        sessionSave() {
            this.$emit("sessionSave");
        },
    },
};
</script>


<style scoped>
.tk_coll_box {
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: 0.4s;
    width: 400px;
    overflow: hidden;
    margin-bottom: 12px;
}
.tk_coll_box:hover,
.tk_coll_box.open {
    border: 1px solid #4475ff;
}
.tk_coll_head {
    height: 65px;
    background: rgba(165, 177, 209, 0.1);
    padding: 0 20px;
    cursor: pointer;
}
.tk_coll_head .el-icon-circle-plus-outline,
.tk_coll_head .el-icon-delete {
    flex-shrink: 0;
    font-size: 18px;
    color: #616c85;
}
.tk_coll_head_conter {
    margin: 0 12px;
}
.tch_title {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
}
.tch_text {
    font-size: 12px;
    color: #b4b7bd;
    margin-top: 4px;
}
.tk_coll_content {
    padding: 20px 20px 0 20px;
}
.tk_tag_box {
    margin-bottom: 12px;
}
.el-form-item .tk_coll_content .el-form-item {
    margin-bottom: 18px !important;
}
/deep/ .tk_coll_content .el-form-item__label {
    color: #616c85 !important;
}
.tall_box {
    height: 300px;
    overflow-y: auto;
}
.tall_item {
    line-height: 20px;
    padding: 5px 0;
    font-size: 14px;
    cursor: pointer;
}
.nodata{
    line-height: 300px;
    text-align: center;
}
</style>

